import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'
import ContentBox from 'components/contentBox'
import Filters from 'components/common/filters'
import CustomTable from 'components/common/table'
import { Form, message, Popconfirm, Button } from 'antd'
import { widgetType } from 'constants'
import PropTypes from 'prop-types'
import Style from './goods.css'

class IndexForm extends Component {
  static propTypes = {
    form: PropTypes.object,
    getGoodsRecycleList: PropTypes.func,
    recycleData: PropTypes.object,
    restoreGoods: PropTypes.func,
    restoreGoodsRequest: PropTypes.any,
    getAuthorList: PropTypes.func,
    getCategoryOptions: PropTypes.func,
    categoryOptions: PropTypes.any,
    authorOptionsList: PropTypes.any
  }
  constructor (props) {
    super(props)
    this.state = {
      pageNo: 1,
      pageSize: 20,
      params: {},
      searchParams: {},
      selectedRowKeys: []
    }
    this.search = this.search.bind(this)
    this.reset = this.reset.bind(this)
    this.onPageChange = this.onPageChange.bind(this)
    this.onShowSizeChange = this.onShowSizeChange.bind(this)
    this.onSelectChange = this.onSelectChange.bind(this)
    this.restoreAll = this.restoreAll.bind(this)
  }

  getFilterCols (category, author) {
    return [
      {
        label: '输入搜索',
        id: 'searchField',
        widget: widgetType.input,
        placeholder: '商品名称/商品编号'
      }, {
        label: '商品分类',
        id: 'codePath',
        widget: widgetType.select,
        placeholder: '请选择商品分类',
        options: category || []
      }, {
        label: '创作者分类',
        id: 'authorName',
        widget: widgetType.select,
        placeholder: '请选择创作者',
        options: author || []
      }
    ]
  }

  getTableCols () {
    return [
      {
        title: '编号',
        dataIndex: 'commodityId',
        key: 'commodityId',
        width: 100,
        sorter: (a, b) => a.commodityId - b.commodityId
      },
      {
        title: '商品图片',
        dataIndex: 'imageUrl',
        key: 'imageUrl',
        width: 100,
        render: text => <img className={Style['image']} src={text} />

      },
      {
        title: '商品名称',
        dataIndex: 'commodityName',
        key: 'commodityName',
        width: 100
      },
      {
        title: '商品分类',
        dataIndex: 'categoryNamePath',
        key: 'categoryNamePath',
        width: 100
      },
      {
        title: '价格',
        dataIndex: 'price',
        key: 'price',
        width: 100,
        sorter: (a, b) => a.price - b.price
      },
      {
        title: '货号',
        dataIndex: 'commodityNo',
        key: 'commodityNo',
        width: 100
      },
      {
        title: '操作',
        dataIndex: 'operate',
        key: 'operate',
        render: (text, record) => {
          return <>
            <Popconfirm placement='top' title='确认是否还原' onConfirm={() => this.handleRestore(record.commodityId)}>
              <a className={Style['a-btn']}>还原</a>
            </Popconfirm>
          </>
        },
        width: 100
      }
    ]
  }

  reset () {
    this.setState({
      pageNo: 1,
      pageSize: 20,
      searchParams: {}
    })
    this.props.getGoodsRecycleList({
      pageNo: 1,
      pageSize: 20
    })
  }
  search (values = {}) {
    const { pageSize, pageNo } = this.state
    values.pageNo = pageNo
    values.pageSize = pageSize
    this.props.getGoodsRecycleList(values)
  }

  onPageChange (pageNo, pageSize) {
    const { searchParams } = this.state
    searchParams.pageNo = pageNo
    searchParams.pageSize = pageSize
    this.setState({
      pageNo
    })
    this.props.getGoodsRecycleList(searchParams)
  }

  onShowSizeChange (current, pageSize) {
    this.setState({
      pageSize
    })
    const { searchParams } = this.state
    searchParams.pageNo = current
    searchParams.pageSize = pageSize
    this.props.getGoodsRecycleList(searchParams)
  }

  // 还原
  handleRestore (id) {
    this.props.restoreGoods({
      restoreList: [id]
    })
  }

  onSelectChange (selectedRowKeys, selectedRows) {
    let restoreList = []
    selectedRows.map(item => {
      restoreList.push(item.commodityId)
    })

    this.setState({
      restoreList,
      selectedRowKeys
    })
  }

  // 批量还原
  restoreAll () {
    const { restoreList } = this.state
    if (!restoreList || (restoreList && restoreList.length <= 0)) {
      message.warning('请选择要还原的商品')
      return
    }
    this.props.restoreGoods({
      restoreList
    })
  }

  componentDidMount () {
    const { pageSize, pageNo } = this.state
    this.props.getGoodsRecycleList({
      pageSize,
      pageNo
    })
    this.props.getAuthorList()
    this.props.getCategoryOptions()
  }

  componentWillReceiveProps (nextProps) {
    if (!this.props.restoreGoodsRequest && nextProps.restoreGoodsRequest) {
      message.success('还原成功')
      this.search()
    }
  }

  render () {
    const { pageNo, pageSize, selectedRowKeys } = this.state
    const { form, recycleData, categoryOptions, authorOptionsList } = this.props
    const pagination = {
      showSizeChanger: true,
      current: pageNo,
      total: recycleData && recycleData.total,
      onChange: this.onPageChange,
      pageSize,
      onShowSizeChange: this.onShowSizeChange
    }

    return (
      <>
        <ContentBox>
          <div className={Style['scenes-RecycleForm']}>
            <Filters
              cols={this.getFilterCols(categoryOptions, authorOptionsList)}
              form={form}
              search={this.search}
              reset={this.reset} >
              <Button type='primary' onClick={this.restoreAll}>批量还原</Button>
            </Filters>
            <CustomTable
              selectedRowKeys={selectedRowKeys}
              multipleSelect={this.onSelectChange}
              multiple
              loading={!recycleData} columns={this.getTableCols()}
              dataSource={(recycleData && recycleData.recycleList) || []}
              pagination={pagination} />
          </div>
        </ContentBox>
      </>
    )
  }
}

const mapState = state => ({
  recycleData: state.goods.recycleData,
  authorOptionsList: state.goods.authorOptionsList,
  categoryOptions: state.goods.categoryOptions,
  restoreGoodsRequest: state.goods.restoreGoodsRequest
})
const mapDispatch = dispatch => ({
  getGoodsRecycleList: dispatch.goods.getGoodsRecycleList,
  getCategoryOptions: dispatch.goods.getCategoryOptions,
  getAuthorList: dispatch.goods.getAuthorList,
  restoreGoods: dispatch.goods.restoreGoods
})

const Index = Form.create()(IndexForm)

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(Index)
)
